page-TabRank {
    ion-content {
        background: #FAFAFA !important;
    }
    ion-segment {
        margin: 0 auto;
        // background: #fff;
        border-radius: 100px;
        overflow: hidden;
        box-shadow: 0px 0px 10px rgba($color: #fff, $alpha: .1);
    }
    .toolbar-ios .segment-ios {
        position: absolute;
        left: 16px;
        right: 16px;
        top: 0;
        width: auto;
    }
    .toolbar-ios .segment-button {
        height: 34px;
        line-height: 34px;
        max-width: none;
    }
    .segment-ios .segment-button {
        border: none;
        color: $text-color;
        font-size: 14px;
    }
    .segment-ios .segment-button.segment-activated {
        background: linear-gradient(to right, rgb(252, 152, 46), #FF6500);
        border-radius: 100px;
        border: none;
    }
    
    .head {
        height: 200px;
        [col-4] {
            height: auto;
        }
        .avatar {
            display: block;
            height: auto;
            margin: 0 auto;
            position: relative;
            margin-top: 50px;
            img {
                border-radius: 100%;
                border: 2px solid;
            }
            p {
                font-size: 16px;
                margin: 15px 0 5px 0;
            }
            span {
                font-size: 12px;
                color: #999;
                i {
                    font-style: normal;
                }
            }
        }
        .a1 {
            margin-top: 40px !important;
        }
        .a1 img,
        .a1 p,
        .a1 span i {
            border-color: #F66767;
            color: #F66767;
        }
        .a2 img,
        .a2 p,
        .a2 span i {
            border-color: rgb(228, 154, 129);
            color: rgb(228, 154, 129);
        }
        .a3 img,
        .a3 p,
        .a3 span i {
            border-color: #88B2F7;
            color: #88B2F7;
        }
        .a1:after {
            content: '';
            display: block;
            height: 20px;
            width: 32.5px;
            background: url('../assets/imgs/rank/win1.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: -18px;
            z-index: 3;
            left: calc( 50% - 16.25px );
        }
        .a2:after {
            content: '';
            display: block;
            height: 15px;
            width: 25px;
            background: url('../assets/imgs/rank/win2.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: -13px;
            z-index: 3;
            left: calc( 50% - 12.5px );
        }
        .a3:after {
            content: '';
            display: block;
            height: 15px;
            width: 25px;
            background: url('../assets/imgs/rank/win3.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: -13px;
            z-index: 3;
            left: calc( 50% - 12.5px );
        }

        .a1:before {
            content: '';
            display: block;
            height: 22.5px;
            width: 72px;
            background: url('../assets/imgs/rank/top1.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: 50px;
            z-index: 3;
            left: calc( 50% - 36px );
        }
        .a2:before {
            content: '';
            display: block;
            height: 22.5px;
            width: 72px;
            background: url('../assets/imgs/rank/top2.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: 40px;
            z-index: 3;
            left: calc( 50% - 36px );
        }
        .a3:before {
            content: '';
            display: block;
            height: 22.5px;
            width: 72px;
            background: url('../assets/imgs/rank/top3.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: 40px;
            z-index: 3;
            left: calc( 50% - 36px );
        }
    }

    .list-ios {
        margin: 0;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        overflow: hidden;
    }
    .item-ios {
        border: none !important;
    }
    .list-ios .item-block .item-inner {
        border-bottom: none;
    }
    .item-ios [item-start] {
        font-size: 16px;
        color: rgb(187, 187, 187);
    }
    .pic {
        border-radius: 100%;
        margin-right: 10px;
    }
    .label-ios {
        margin: 11px 8px 11px 0;
        line-height: 30px;
        color: #666;
        font-size: 16px;
    }
    .item-ios [item-end] {
        font-size: 14px;
        color: #999;
        i {
            font-style: normal;
            color: #EC6A62;
        }
    }
}
